<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .gray{
            background-color: lightslategrey;
        }
        .cyan{
            background-color: lightblue;
        }
        .orange{
            background-color: darkseagreen;
        }
    </style>
    <script>
        function changeColor() {
            var arr = document.getElementsByTagName("tr");
            for (var i = 0; i < arr.length; i++) {
                if (i==0){
                    arr[i].className="gray";
                } else if(i%2==0){
                    arr[i].className="cyan";
                } else {
                    arr[i].className="orange";
                }
            }
        }
    </script>
</head>
<body onload="changeColor()">
<table border="1px" padding="2" >
    <tr>
        <th width="80">ID</th>
        <th width="80">姓名</th>
        <th width="80">专业</th>
    </tr>
    <tr>
        <td>20180201</td>
        <td>刘备</td>
        <td>全栈</td>
    </tr>
    <tr>
        <td>20180202</td>
        <td>曹操</td>
        <td>java</td>
    </tr>
    <tr>
        <td>20180203</td>
        <td>孙权</td>
        <td>Python</td>
    </tr>
    <tr>
        <td>20180204</td>
        <td>刘表</td>
        <td>大数据</td>
    </tr>
</table>
</body>
</html>